<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>购买记录</title>
    </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="js/config.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/navbar-component.js?v=2"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
    <style>
        body{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
    </style>
</head>

<body class="bodybg">
    <div id="app" v-cloak>
        <nav-top-bar golink="/wode.html" linktitle="购买记录"></nav-top-bar>
        <div class="wodekongjian-nav">
            <ul class="d-f a-c-c">
                <li :class="{on:'video'===tab}" @click="tabswitch('video')">视频</li>
                <li :class="{on:'topic'===tab}" @click="tabswitch('topic')">专栏</li>
            </ul>
        </div>
        <div class="wodekongjian-wrapper">

            <!-- 视频 -->
            <div class="category-wrapper" v-show="'video'===tab">
                <div class="hotbox category-cells">
                    <nut-infiniteloading @loadmore="loadMore()" :has-more="list.video.hasMore"
                        :is-loading="list.loading" :is-showMod="true" unload-more-txt="没有更多了">
                        <ul class="kecheng-cells">
                            <template v-for="item in list.video.rows">
                                <li class="d-f j-c-s a-c-c" @click="go(item.id)">
                                    <div class="hotbox-top">
                                        <img :src="item.cover_url" class="product-img product-img2" style="height:1.35rem;" />
                                        <div class="hotbox-label">
                                            <div class="spsc spsc2 d-f a-c-c" style="background: transparent;">
                                                <img src="img/wode/icon_biji_bo.png" class="spsc-icon" />
                                                <span class="spsc-num">{{ durationFormat(item.duration) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="keshi-xq flex1">
                                        <p class="product-title">{{ item.title }}</p>
                                        <div class="product-leibie">
                                            <span>热度{{ item.hot }}</span>
                                        </div>
                                    </div>
                                </li>
                            </template>
                        </ul>
                    </nut-infiniteloading>
                </div>
            </div>

            <!-- 专栏 -->
            <div class="category-wrapper" v-show="'topic'===tab">
                <div class="hotbox category-cells">
                    <nut-infiniteloading @loadmore="loadMore()" :has-more="list.topic.hasMore"
                        :is-loading="list.loading" :is-showMod="true" unload-more-txt="没有更多了">
                        <ul class="kecheng-cells">
                            <template v-for="item in list.topic.rows">
                                <li class="d-f j-c-s a-c-c" @click="go(item.id)">
                                    <div class="hotbox-top">
                                        <img :src="item.cover_url" class="product-img product-img2" style="height: 1.35rem;" />
                                        <div class="hotbox-label">
                                            <div class="spsc spsc2 d-f a-c-c" style="background: transparent;">
                                                <img src="img/wode/icon_biji_bo.png" class="spsc-icon" />
                                                <span class="spsc-num">{{ durationFormat(item.duration) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="keshi-xq flex1">
                                        <p class="product-title">{{ item.title }}</p>
                                    </div>
                                </li>
                            </template>
                        </ul>
                    </nut-infiniteloading>
                </div>
            </div>

        </div>
    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data() {
                return {
                    list: {
                        video: {
                            hasMore: true,
                            page: 1,
                            rows: []
                        },
                        topic: {
                            hasMore: true,
                            page: 1,
                            rows: []
                        },
                        loading: false
                    },
                    tab: 'video',
                }
            },
            mounted() {
                this.getList();
            },
            methods: {
                // 列表接口
                getList() {
                    this.list.loading = true;
                    axios.get(`/mp/StudyPlan/getMyTrade?page=${this.list[this.tab].page}&type=${this.tab}`).then(e => {
                        this.list.loading = false;
                        if (e.data.hasOwnProperty('code') && 0 === e.data.code) {
                            this.list[this.tab].hasMore = false;
                            this.$notify.warn(e.data.msg);
                        } else {
                            e.data.data.length > 0 && this.list[this.tab].rows.push(...e.data.data);
                            this.list[this.tab].hasMore = 10 === e.data.length;
                        }
                    }).catch(e => {
                        console.log(e);
                        this.list.loading = false;
                        this.list[this.tab].hasMore = false;
                        this.$notify.danger('服务器请求异常');
                    });
                },

                // 加载更多
                loadMore() {
                    this.list[this.tab].page++;
                    this.getList();
                },

                // 切换标签
                tabswitch(tab) {
                    this.tab = tab;
                    if (0 === this.list[tab].rows.length && this.list[tab].hasMore) {
                        this.getList();
                    }
                },

                // 删除笔记
                delNote(note) {
                    const self = this;
                    self.$dialog({
                        id: 'delNote',
                        content: '是否确认删除笔记？',
                        onOkBtn(event) {
                            this.close();
                            const loading = this.$toast.loading('删除中...', { duration: 0 });
                            axios.post('/mp/video/delNote', { id: note.id }).then(e => {
                                loading.hide();
                                if (1 === e.data.code) {
                                    self.$refs[`note${note.id}`][0].sliderEle.remove();
                                    this.$notify.success('删除成功');
                                } else {
                                    this.$notify.warn(e.data.msg);
                                }
                            }).catch(e => {
                                loading.hide();
                                this.$notify.danger('服务器请求异常');
                            });
                        },
                    });
                },

                // 删除单词
                delWord(word) {
                    const self = this;
                    self.$dialog({
                        id: 'delWord',
                        content: '是否确认删除单词？',
                        onOkBtn(event) {
                            this.close();
                            const loading = this.$toast.loading('删除中...', { duration: 0 });
                            axios.post('/mp/video/delWord', { id: word.id }).then(e => {
                                loading.hide();
                                if (1 === e.data.code) {
                                    self.$refs[`word${word.id}`][0].sliderEle.remove();
                                    this.$notify.success('删除成功');
                                } else {
                                    this.$notify.warn(e.data.msg);
                                }
                            }).catch(e => {
                                loading.hide();
                                this.$notify.danger('服务器请求异常');
                            });
                        },
                    });
                },

                			// 时间格式化
			durationFormat(second) {
				let time = '';
				if (second > 3600) {
					
					// 超过1小时
					time = parseInt(second / 3600)
					if(time < 10) time = "0" + time
					time = time + ':';
					second = second % 3600;
				}
				let minutes = parseInt(second / 60)
				if(minutes < 10){
					minutes = "0"+minutes
				}
				second = parseInt(second % 60)
				if(second < 10){
					second = "0" + second
				}
				return time + minutes  + ':' + second;
			},

                // 跳转到视频页
                go(id) {
                    window.location.href = '/shipinxuexi.html?id=' + id;
                }
            }
        })
    </script>
</body>

</html>